<template>
  <section class="m-card m-list-table">
    <div class="list-title">
      数据列表
      <div class="right">
        <!-- <el-button type="primary"
                   plain
                   size="mini">批量上架</el-button>
        <el-button type="primary"
                   plain
                   size="mini">批量下架</el-button>
        <el-button type="primary"
                   plain
                   size="mini">新增</el-button> -->
      </div>
    </div>
    <ym-table :data='data'
              :total="total"
              :loading='loading'
              :options="options"
              limit-height
              border
              :currentPage="currentPage"
              :perPage="perPage"
              @load='handlerLoad'></ym-table>
    <ym-drawer :visible.sync='showDrawer'
               :title='selectRow.登陆手机'>
      <el-button @click="addRole"
                 type="primary"
                 size="small">新增</el-button>
      <el-table :data='selectRow.list'
                :loading='selectRow.loading'
                border
                size='small'
                max-height='600px'>
        <el-table-column label="角色ID"
                         prop="角色ID"></el-table-column>
        <el-table-column label="角色"
                         prop="角色.角色名"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-popconfirm title="确认删除？"
                           @confirm="deleteRow(row)">
              <el-button type="text"
                         slot='reference'
                         size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </ym-drawer>
    <ym-dialog v-if="addDialog"
               :visible.sync='addDialog'
               title="添加角色"
               width="500px"
               hide-footer>
      <el-form label-position="right"
               label-width="130px">
        <el-form-item label="角色">
          <el-select v-model="selectRow.add.角色"
                     filterable>
            <el-option v-for="item in rolesList"
                       :key="item.id"
                       :value="item.id"
                       :label="item.namecode"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialog = false">关闭</el-button>
        <el-button @click="submitUserRole"
                   type="primary"
                   :disabled='selectRow.add.角色?false:true'
                   :loading='selectRow.submitLoading'>保存</el-button>
      </div>
    </ym-dialog>
  </section>
</template>
<script>
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash'
import listTable from '@/views/mixins/list-table'
export default {
  mixins: [listTable],
  data () {
    return {
      showDrawer: false,
      addDialog: false,
      selectRow: {},
      rolesList: {},
      options: {
        config: [
          {
            label: '标识',
            width: '100',
            render: (h, params) => {
              return h('div', params.row.id)
            }
          },
          {
            label: '图像',
            width: '100',
            render: (h, params) => {
              return h('div', [
                h('ym-upload-image', {
                  props: {
                    readonly: true,
                    value: params.row.图像 ? [params.row.图像] : [],
                    width: '50',
                    height: '50'
                  }
                })
              ])
            }
          },
          {
            label: '用户名称',
            render: (h, params) => {
              return h('div', params.row.用户名称)
            }
          },
          {
            label: '手机号',
            render: (h, params) => {
              return h('div', params.row.登陆手机)
            }
          },
          {
            label: '所在区域',
            render: (h, params) => {
              return h('div', params.row.所在区域)
            }
          },

          {
            label: '推广人',
            render: (h, params) => {
              return h('div', params.row.推广人 && params.row.推广人.用户名称)
            }
          },
          {
            label: '状态',
            align: 'center',
            render: (h, params) => {
              return h('div', params.row.NodeType && params.row.NodeType.namecode)
            }
          },
          {
            label: '操作',
            width: '250',
            align: 'right',
            render: (h, params) => {
              return h('div', [

                // h('el-button', {
                //   props: {
                //     type: 'text',
                //     size: 'small',
                //     marginRight: '0'
                //   },
                //   on: {
                //     click: () => {
                //       this.toPath(`/operation/recharge/list`)
                //     }
                //   }
                // }, '会员充值'),
                h('permission-control', {
                  props: {
                    permission: '/merchant/operation/user/coupon/list'
                  }
                }, [
                  h('el-button', {
                    props: {
                      type: 'text',
                      size: 'small',
                      marginRight: '0'
                    },
                    on: {
                      click: () => {
                        this.toPath(`/merchant/operation/user/coupon/index?userId=${params.row.id}`)
                      }
                    }
                  }, '用户卡券'),
                ]),
                h('permission-control', {
                  props: {
                    permission: '/merchant/operation/user/invoice/list'
                  }
                }, [
                  h('el-button', {
                    props: {
                      type: 'text',
                      size: 'small',
                    },
                    on: {
                      click: () => {
                        this.toPath(`/merchant/operation/user/invoice/index?userId=${params.row.id}`)
                      }
                    }
                  }, '开票信息'),
                ]),
                h('permission-control', {
                  props: {
                    permission: '/merchant/user/address/list'
                  }
                }, [
                  h('el-button', {
                    props: {
                      type: 'text',
                      size: 'small',
                    },
                    on: {
                      click: () => {
                        this.toPath(`/merchant/operation/user/address/index?userId=${params.row.id}`)
                      }
                    }
                  }, '收货地址'),
                ]),
                // h('el-button', {
                //   props: {
                //     type: 'text',
                //     size: 'small',
                //     marginRight: '0'
                //   },
                //   on: {
                //     click: () => {
                //       this.toPath(`/operation/consume/list`)
                //     }
                //   }
                // }, '消费记录'),
                // h('el-button', {
                //   props: {
                //     type: 'text',
                //     size: 'small',
                //     marginRight: '0'
                //   },
                //   on: {
                //     click: () => {
                //     }
                //   }
                // }, '积分记录'),
                // h('el-button', {
                //   props: {
                //     type: 'text',
                //     size: 'small',
                //     marginRight: '0'
                //   },
                //   on: {
                //     click: () => {
                //       this.toPath(`/operation/package/list`)
                //     }
                //   }
                // }, '会员套餐'),
                // h('el-button', {
                //   props: {
                //     type: 'text',
                //     size: 'small',
                //     marginRight: '0'
                //   },
                //   on: {
                //     click: () => {
                //     }
                //   }
                // }, '反馈'),
              ])
            }
          }

        ]
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.$command.execute({
        api: `/api/SelectByConds/AppRoles`,
        params: {
          index: 0,
          pageSize: 0
        },
        data: {
          "CONDS": [],
          "ORDER": ['id DESC'],
          "COLUMNS": ["id", "应用:应用名", "namecode", "bedata", "上级:角色名", "NodeType", "备注", 'nodetype', 'optdate', 'rela']
        }
      }).then(async res => {
        this.rolesList = res.data
      })
    },
    getUserRole () {
      this.$command.execute({
        api: `/api/SelectByConds/UsersRoles`,
        params: {
          index: 0,
          pageSize: 0
        },
        data: {
          "CONDS": ['用户', this.selectRow.id],
          "COLUMNS": ["id", "用户 用户ID", "用户:用户名称|登陆手机|图像", "用户名", "角色:角色名", "角色名", "bedata", "rela", "角色 角色ID", 'nodetype', "NodeType", "namecode"]
        }
      }).then(async res => {
        this.$set(this.selectRow, 'list', res.data)
        this.$set(this.selectRow, 'tableLoading', false)
      })
    },
    addRole () {
      this.$set(this.selectRow, 'add', {
        用户: this.selectRow.id,
        用户名: this.selectRow.用户名称,
        角色: '',
        角色名: ''
      })
      this.addDialog = true
    },
    //查询是否可以删除
    async deleteRow (row) {
      let canDeleted = await this.$store.dispatch('app/canDeleteRow', { busiName: `UsersRoles`, rowId: row.id })
      if (!canDeleted) return
      this.$command.execute({
        api: '/api/DelRowById/UsersRoles',
        params: { rowId: row.id }
      }).then(res => {
        this.$message.success('删除成功')
        this.getUserRole()
      })
    },
    //绑定角色
    submitUserRole () {

      let data = cloneDeep(this.selectRow.add)
      if (!data.角色) {
        this.$message.warning('请选择角色')
        return
      }
      data.角色名 = this.rolesList.filter(e => e.id == data.角色)[0].namecode
      this.$set(this.selectRow, 'submitLoading', true)
      this.$command.execute({
        api: '/api/Insert/UsersRoles',
        data
      }).then(res => {
        this.$message.success('保存成功')
        this.getUserRole()
        this.$set(this.selectRow, 'submitLoading', false)
        this.addDialog = false
      }).catch(err => {
        this.$set(this.selectRow, 'submitLoading', false)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
